import React, { useState } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Form, Input, message } from 'antd'
import './index.scss'
import LogoUrl from '@/assets/logo.jpg'
import { useNavigate, useParams } from 'react-router-dom'
import apis from '@/apis'
import CODE from '@/apis/code.config'
const Register: React.FC = () => {
  const navigate = useNavigate()
  const [btnLoadings, setBtnLoadings] = useState<boolean>(false)
  // 表单确定后的回调
  const onFinish = async ({
    username,
    newPassword,
  }: {
    username: string
    newPassword: string
  }) => {
    setBtnLoadings(true)
    if (isRegister === 'Y') {
      const res = await apis.registerApi({ username, password: newPassword })
      if (res.data.code === CODE.SUCCESS) {
        message.success('注册成功')
        navigate('/login')
      } else {
        message.warning(res.data.message)
      }
    } else {
      // 为了少写页面 username 代替新密码
      const res = await apis.editPasswordApi({
        username: username,
        newPassword: newPassword,
      })
      if (res.data.code === CODE.SUCCESS) {
        message.success('重置成功')
        navigate('/login')
      } else {
        message.warning(res.data.message)
      }
    }
    setBtnLoadings(false)
  }
  const { isRegister } = useParams()

  return (
    <div className="login-page">
      <div className="m-t register">
        <img className="Logo" src={LogoUrl} />
        <div className="slogan">{isRegister === 'Y' ? '注册' : '忘记密码'}</div>
        <Form
          name="register"
          onFinish={onFinish}
          style={{ width: 500, marginTop: 30 }}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入账号',
              },
            ]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder={
                isRegister === 'Y' ? `请输入账号(支持中文)` : '请输入账号'
              }
              maxLength={20}
            />
          </Form.Item>
          <Form.Item
            name="newPassword"
            rules={[
              {
                required: true,
                message:
                  isRegister === 'Y'
                    ? '请输入密码(6-12位)'
                    : '请输入新密码(6-12位)',
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              maxLength={20}
              placeholder={
                isRegister === 'Y'
                  ? '请输入密码(6-12位)'
                  : '请输入新密码(6-12位)'
              }
            />
          </Form.Item>
          <Form.Item>
            <Button
              loading={btnLoadings}
              block
              type="primary"
              htmlType="submit"
            >
              {isRegister === 'Y' ? '注册' : '重置'}
            </Button>
          </Form.Item>
        </Form>
        <Button
          style={{ width: 500 }}
          color="danger"
          onClick={() => {
            navigate('/login')
          }}
        >
          返回登陆
        </Button>
        <Button
          style={{ width: 500, marginTop: 20 }}
          color="danger"
          onClick={() => {
            navigate('/')
          }}
        >
          回到首页
        </Button>
      </div>
    </div>
  )
}

export default Register
